<template>
  <footer>
    <div class="footer_menu continer">
      <a
        @click="Hander(index)"
        v-for="(item, index) in list"
        :class="{ active: item.isActive }"
        :key="item.icon"
      >
        <i class="iconfont" :class="item.icon"></i>
        <span>{{ item.text }}</span>
      </a>
    </div>
  </footer>
</template>
<script>
export default {
  mounted() {
    var curRouteName = this.$route.name;
    this.list.forEach((item, num) => {
      if (item.to.name == curRouteName) {
        item.isActive = true;
      } else {
        item.isActive = false;
      }
    });
  },
  data() {
    return {
      list: [
        {
          icon: "icon-home",
          text: "首页",
          to: { name: "Home" },
          isActive: true,
        },
        {
          icon: "icon-gouwuche",
          text: "购物车",
          to: { name: "Cart" },
          isActive: false,
        },
        {
          icon: "icon-dingdan",
          text: "订单",
          to: { name: "Order" },
          isActive: false,
        },
        {
          icon: "icon-wode",
          text: "我的",
          to: { name: "My" },
          isActive: false,
        },
      ],
    };
  },
  methods: {
    Hander(index) {
      var curRouteName = this.$route.name;
      if (this.list[index].to.name == curRouteName) return;

      this.$router.push(this.list[index].to);
    },
  },
};
</script>
<style lang="scss" scoped>
////底部
.active {
  color: #1fa4fc;
}
footer {
  margin-top: 52px;

  .footer_menu {
    border-top: 1px solid #ffffff;

    box-shadow: 0 -1px 1px 0 #f1f1f1;
    position: fixed;
    z-index: 999;
    background: white;

    bottom: 0px;
    width: 100%;
    height: 49px;
    justify-content: center;
    display: flex;
    a {
      flex: 20%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-family: PingFangSC-Regular;
      font-size: 10px;
      text-align: center;
      span {
        margin-top: 4.4px;
      }
    }
  }
}
</style>